<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.box{
	position: relative;height: 100%;
	.roll{
		position: absolute;bottom:1rem;top: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
	}
	footer{
		position: absolute;bottom:0;
	}
}
</style>
</head>
<body>

<div class="box">
    <div class="roll">
        滚动区域
 <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
 <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
 <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
  <center>测试文字</center>
        </div>
    <footer>底部固定菜单</footer>
</div>
<!---公用样式--->
<style>
html,body{
    margin:0;padding:0;height:100%;width:100%;
}
footer{
    background:#F2F3F6;max-width: 750px;width: 100%;height: 1rem;
}
</style>

</body>
</html>